<template>
	<div>
		<!-- 头部 -->
		<div class="return-home">
			<router-link to="/cation/cationSon">
				<p class="return-text">
					<van-icon name="arrow-left" />返回
				</p>
			</router-link>
			<p class="bufan">不凡</p>
		</div>

		<!-- 轮播部分 -->
		<van-swipe class="Info-swipe" :autoplay="2000" indicator-color="#000000">
			<van-swipe-item v-for="item in banner" :key="item.id">
				<img :src="item.img_url" alt="" style="width: 375px; height: 375px;">
			</van-swipe-item>
		</van-swipe>
		<!-- 承诺 -->
		<div class="topBar">
			<span>&#10052 30天无理由退货</span>
			<span> &#10052 48小时快速退款</span>
			<span> &#10052 满88元免邮费</span>
		</div>
		<!-- 价格文字区 -->
		<div class="Info-price-text">
			<span class="Info-price-text1">{{info.name}}</span>
			<p class="Info-price-text2">{{info.goods_brief}}</p>
			<p class="Info-price-text3">&#165{{info.retail_price}}</p>
		</div>
		<!-- 选择规格数量 -->
		<div class="Info-choose">
			<p>请选择规格质量</p>
			<span>&#62</span>

		</div>
		<!-- 商品参数 -->

		<div class="parameter">

			<div class="parameter-content">
				<span>商品参数</span>
				<p v-for="(item,index) in attribute" :key="index">{{item.name}}: <span>{{item.value}}</span> </p>
			</div>
		</div>
		<!-- 详情照片 -->
		<div v-html="info.goods_desc" class="Info-img">

		</div>
		<!-- 常见问题 -->
		<div class="common">
			<!-- <span class="line"></span> -->
			<span class="common-head-text">
				&#8212 常见问题 &#8212
			</span>
			<!-- <span class="line"></span> -->
			<div v-for="item in issue " :key="item.id" class="common-content">
				<p class="common-content-text">{{item.question}}</p>
				<p class="common-content-text1">{{item.answer}}</p>
			</div>
			<!-- 小灰条 -->
			<div class="gray"></div>
			<!-- 大家都在看 -->
			<span class="common-head-text">
				&#8212 大家都在看 &#8212
			</span>
			<div class="bottom-img">

				<div class="bottom-content-img" v-for="item in productList " :key="item.id">
					<img :src="item.list_pic_url" alt="" style="width: 150px; height: 150px;">
					<p class="bottom-content-img-text1">{{item.name}}</p>
					<p class="bottom-content-img-text2">&#165{{item.retail_price}}</p>
				</div>
			</div>
		</div>
		<!-- 底部固定栏 -->
		<van-tabbar v-model="active">
			
		  <van-tabbar-item icon="star-o" @click="collection">收藏</van-tabbar-item>
		 
		  <van-tabbar-item icon="cart-o" :badge="badge">购物车</van-tabbar-item>
		  <van-tabbar-item >立即购买</van-tabbar-item>
		  <van-tabbar-item class="join" @click="join">加入购物车</van-tabbar-item>
		</van-tabbar>
		<!-- 尾巴标签 -->
	</div>
</template>

<script>
	import {
		indexaction,
		currentaction,
		categoryNav,
		goodsList,
		detailaction,
		addcollect,
		listAction,
		addCart,
		cartList
	} from "../../../api/cation/index.js"

	export default {
		data() {
			return {
				badge:3,	
				active:12,
				banner: [],
				info: {},
				attribute: [],
				issue: [],
				productList: [],

			}
		},
		created() {
			this.init()
			
		},
		methods: {
			async init() {
				//商品详情接口
				var res = await detailaction({
					id: this.$route.query.id,
					openId: localStorage.getItem("openId")
				})
				console.log(res)
				this.banner = res.data.gallery
				this.info = res.data.info
				this.attribute = res.data.attribute
				this.issue = res.data.issue
				this.productList = res.data.productList


			},
			 async  collection(){
				 console.log(123)
				 var res = await addcollect({
					 goodsId:this.$route.query.id,
					 openId:localStorage.getItem("openId")
				 })
				 console.log(res)
				 alert("收藏成功")
				 
			 },
			 async join(){
				 var res = await addCart({
					 goodsId:this.$route.query.id,
					 number:1,
					 openId:localStorage.getItem("openId")
				 })
				 console.log(res)
				  alert("添加购物车成功")
			 }
		}
	}
</script>

<style scoped lang="scss">
	@import "../scss/index.scss";

	// 头部
	.return-home {
		display: flex;
		font-size: 16px;
		margin-left: 20px;


		.return-text {
			color: #000000;
		}

		.bufan {
			margin-left: 60px;
		}
	}

	//承诺文字
	.topBar {
		width: 100%;
		height: 50px;
		background-color: #F4F4F4;
		display: flex;
		justify-content: space-between;

		span {
			line-height: 50px;
			color: #666;
		}

	}

	// 价格文字区
	.Info-price-text {
		width: 100%;
		height: 155px;
		text-align: center;

		.Info-price-text1 {
			font-size: .54667rem;
			padding: .26667rem;
			line-height: 50px;

		}

		.Info-price-text2 {
			margin-bottom: .33333rem;
			font-size: .32rem;
			color: #999;
			line-height: 30px;
		}

		.Info-price-text3 {
			margin-top: .13333rem;
			font-size: .46667rem;
			color: #b4282d;

		}
	}

	//选择规格数量
	.Info-choose {
		width: 100%;
		height: 55px;
		background-color: #F4F4F4;

		p {
			float: left;
			line-height: 30px;
		}

		span {
			float: right;
			font-size: 30px;
			line-height: 55px;


		}
	}

	// 商品参数
	.parameter {
		width: 100%;
		background-color: #F4F4F4;
		//background-color: red;
		margin-top: 10px;

		.parameter-content {
			p {
				height: 40px;
				background-color: #F4F4F4;
				//background-color: red;
				margin-bottom: 5px;
				line-height: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #999999;

				span {
					margin-left: 20px;
					color: #000000;
				}
			}


			background: #fff;
			margin-bottom: .26667rem;


		}
	}

	// 常见问题
	.common {

		width: 100%;

		.common-content {
			margin: 0 auto;
			width: 345px;
			background-color: #FFFFFF;

			.common-content-text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				line-height: .4rem;
				padding-left: .10667rem;
				display: block;
				font-size: .34667rem;
				padding-bottom: .2rem;
				color: #303030;
			}

			.common-content-text1 {
				line-height: .53333rem;
				padding-left: .21333rem;
				font-size: .34667rem;
				color: #787878;
			}
		}

		.common-head-text {

			width: 100%;
			height: 20px;
			background: #fff;
			text-align: center;
			margin-left: 150px;

			line-height: 20px;


		}

		// .line{
		// 	display: inline-block;
		// 	margin: 0 auto;
		// 	    height:3px;
		// 	    width:50px;
		// 	    background: #000000;

		// }
	}

	// 小灰条
	.gray {
		width: 100%;
		height: 50px;
		background-color: #F1EFEF;
	}

	//大家都在看内容
	.bottom-img {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 50px;

		.bottom-content-img {
			width: 50%;
			text-align: center;
		}

	}
	// 加入购物车
	.join{
		background-color: #B4282D;
		color: #FFFFFF;
		
	}
</style>
